<!DOCTYPE html>
<html lang="zh" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro" xmlns:th="http://www.thymeleaf.org">
<meta charset="utf-8">
<link rel="stylesheet" th:href="@{/css/bootstrap.min.css}"/>
<link rel="stylesheet" th:href="@{/css/font-awesome.min.css}"/>
<!-- bootstrap-table 表格插件样式 -->
<link rel="stylesheet" th:href="@{/ajax/libs/bootstrap-table/bootstrap-table.min.css}"/>
<link rel="stylesheet" th:href="@{/ajax/libs/bootstrap-treetable/bootstrap-treetable.css}"/>
<link rel="stylesheet" th:href="@{/ajax/libs/bootstrap-table/extensions/columns/bootstrap-table-fixed-columns.css}"/>
<link rel="stylesheet" th:href="@{/css/animate.css}"/>
<link rel="stylesheet" th:href="@{/css/style.css}"/>
<link rel="stylesheet" th:href="@{/ajax/libs/select/select2.css}"/>
<link rel="stylesheet" th:href="@{/ruoyi/css/ry-ui.css}"/>
<link rel="stylesheet" th:href="@{/css/orgstyle.css}"/>


<body class="">
<div class="nav left">
    <div class="orglist" id="approverList">
        <h3>评价人</h3>
        <ul>
            <li th:each="approver:${approverList}"
                th:onclick="'javascript:showPreview(\''+${approver.approverCode}+'\',\''+${approver.id}+'\',\''+${approver.approverStatus}+'\',this);'">
                <p th:text="${approver.approverCode}"></p>
            </li>
        </ul>
    </div>
</div>

<div class="content right">
    <div class="tabPanel">
        <div class="nav_test">
            <h3 id="orgDeptProNameKey">评价信息</h3>
        </div>

        <div class="panes">
            <div class="pane" style="display:block;">
                <div class="pane_mokuai" id="orgDept">
                    <div id="xq">
                        鼠标悬浮显示详情框
                    </div>
                    <table class="table table-striped" id="table">
                        <!--在此处填充表格数据-->
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<div th:include="include::footer"></div>
<script th:src="@{/ajax/libs/select/select2.js}"></script>
<script th:inline="javascript">

    var prefix = ctx + "zzjx/pefctasstable";

    /**
     * 展示用户评价信息
     * approverCode 办理人员工号
     **/
    function showPreview(approverCode, id, approverStatus, $el) {
        var tableId = [[${table.id}]];
        if (approverStatus == "1") {
            $.modal.alertWarning(approverCode + "该评价人未评价");
            return false;
        }
        $.modal.loading("稍等");
        $.ajax({
            url: ctx + "zzjx/evaluationResult/evaluationResults",
            type: "GET",
            data: {"tableId": tableId, "approverId": id, "approverCode": approverCode},
            dataType: "JSON",
            success: function (result) {
                //构建表格
                var piList = result.piList;
                var list = result.list;
                buildTable($('#table'), piList.length, list.length, piList, list);
                $.modal.closeLoading();
            },
            error: function () {
                $.modal.closeLoading();
                $.modal.alertError("加载信息失败!");
            }
        })
        $($el).addClass("selected").siblings().removeClass("selected");
    }

    /**
     * 构建预览信息表格
     * @param $el
     * @param cells
     * @param rows
     * @param dictData
     * @param peftempletindicatorList
     */
    function buildTable($el, cells, rows, dictData, peftempletindicatorList) {
        var i, j, row,
            columns = [],
            data = [];
        columns.push({field: "id", title: "id", visible: false});
        //拼接table,拼接表头
        for (var dd in dictData) {
            var dictLabel = dictData[dd]["showname"];//显示名称
            var dictValue = dictData[dd]["indClassname"];//字段值
            var f = {
                field: dictValue,
                title: dictLabel

            }
            columns.push(f);
        }

        $el.bootstrapTable('destroy').bootstrapTable({
            columns: columns,
            data: peftempletindicatorList,
            unique: "id",
            search: false,
            showExport: false,
            height: 700,
            onPostBody: function (data) {
                bding();
                $.modal.closeLoading();
            }
        });
    }

    //表格超出宽度鼠标悬停显示td内容
    function paramsMatter(value, row, index, field) {
        var span = document.createElement('span');
        span.setAttribute('title', value);
        span.innerHTML = value;
        return span.outerHTML;
    }

    //td宽度以及内容超过宽度隐藏
    function formatTableUnit(value, row, index) {
        return {
            css: {
                "white-space": 'nowrap',
                "text-overflow": 'ellipsis',
                "overflow": 'hidden'
            }
        }
    }

    function bding() {
        $("td").mouseover(function (e) {
            var a = $(this).html();
            if (a.indexOf("<input") != -1) {
                a = $(this).find("input").val();
            }
            if (a.length < 7) {
                return;
            }
            $("#xq").html(a);
            $("#xq").css({"position": "absolute", "top": e.pageY + 15, "left": e.pageX - 75}).show();
        });
        $("td").mousemove(function (e) {
            $("#xq").css({
                "position": "absolute",
                "opacity": "0.7",
                "background-color": "666",
                "top": e.pageY + 15,
                "left": e.pageX - 75
            });
        });
        $("td").mouseout(function () {
            $("#xq").hide();
        });
    }
</script>
</body>
</html>
